import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import MathUtil from "../../../script/frame/codeAdapter/MathUtil";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";

interface IProp {
    max: number,
    current: number,
    width: number,
    height: number,
    line: string,
    back: string,
    showPercent: boolean,
    fontSize: number,
    marginT: number,
}
interface IState {

}
export default class PercentBar extends React.Element<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: true,
        }
    }


    render = () => {
        const backSize = { h: this.props.height, w: this.props.width };

        let maxValue = MathUtil.toFixed(this.props.max, 2);
        let value = MathUtil.toFixed(this.props.current, 2);

        const borderWeight = this.props.width / 133;

        let lineW;

        if (value > 0 && maxValue > 0) {
            lineW = (backSize.w * value) / maxValue;
        } else {
            lineW = 0.0001;
        }

        let tempValue = 0;
        if (maxValue > 0) {
            tempValue = (value / maxValue) * 100;
        }
        const percent = MathUtil.toFixed(tempValue, 2);
        const percentStr = percent + '%'

        let formatStr = '';
        formatStr = formatStr + `${value}/${maxValue}`

        if (this.props.showPercent) {
            formatStr = formatStr + `【${percentStr}】`
        }

        return <View   key = {`${GuiKeys.percentBar}`}  style={{ borderWeight: borderWeight, border: this.props.back, hidden: !(value >= 0), width: backSize.w, height: backSize.h, marginL: 0, marginT: 0 }}>
            <View   key = {`${GuiKeys.percentBarLine}`} style={{ backgroundImage: this.props.line, width: lineW, height: backSize.h }}></View>
            <View   key = {`${GuiKeys.percentBarText}`} style={{ float: true, fontSize: this.props.fontSize, fontAlign: TextAlign.center, width: backSize.w, height: backSize.h, marginT: this.props.marginT }}>{formatStr}</View>
        </View>
    }
}